<#systemSituation globalInfo="${globalInfo}"/>

<!-- widget grid with search -->
<section>

    <style type="text/css">
        .auto-new-line {
            word-break: break-all; /*必须*/
        }
    </style>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>日志列表 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <div class="alert alert-block  search-alert">
                        <form id="query-form" action="" class="form-horizontal">
                            <header class="search-header">
                                <a class="close txt-color-greenLight search-action" href="javascript:"><i
                                        class="fa fa-hand-o-down"></i></a>
                                <h4 class="alert-heading">
                                    <i class="fa fa-search txt-color-greenLight search-title"></i>&nbsp;&nbsp;查询过滤
                                </h4>
                            </header>
                            <div class="search-div hide">

                                <fieldset>
                                    <legend>
                                    </legend>

                                    <div class="row" style="margin: 0 20px">

                                        <div class="col-sm-4">

                                            <div class="form-group" style="padding: 5px 25px">
                                                <div class="input-group" rel="tooltip" data-placement="top"
                                                     data-original-title="根据日志的操作用户进行查询">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-user-plus"></i></span>
                                                    <select name="createBy.id" style="width:100%" class="select2">
                                                        <option value="" selected="">All Users</option>
                                                        <!--:
                                                            for(user in userList!){
                                                        -->
                                                        <option value="${user.id}">${user.name}</option>
                                                        <!--:
                                                            }
                                                        -->
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-sm-4" style="padding: 5px 25px">

                                            <div class="input-group" rel="tooltip" data-placement="top"
                                                 data-original-title="日志的操作菜单中包含的内容">
                                                <span class="input-group-addon"><i
                                                        class="fa fa-list-alt"></i></span>
                                                <input type="text" name="title" class="form-control" style="">
                                            </div>
                                        </div>

                                        <div class="col-sm-4">

                                            <div class="form-group" style="padding: 5px 25px">
                                                <div class="input-group" rel="tooltip" data-placement="top"
                                                     data-original-title="根据请求的提交方式进行查询">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-crosshairs"></i></span>
                                                    <select name="method" style="width:100%" class="select2">
                                                        <option value="" selected="">All Types</option>
                                                        <option value="GET">GET</option>
                                                        <option value="POST">POST</option>
                                                        <option value="PUT">PUT</option>
                                                        <option value="DELETE">DELETE</option>
                                                        <option value="OPTIONS">OPTIONS</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="row" style="margin: 0 20px">

                                        <div class="col-sm-4">

                                            <div class="form-group" style="padding: 5px 25px">
                                                <div class="input-group" rel="tooltip" data-placement="top"
                                                     data-original-title="日志的开始时间">
                                                <span class="input-group-addon"><i
                                                        class="fa fa-calendar-check-o"></i></span>
                                                    <input id="beginDate" name="beginDate"
                                                           class="form-control laydate-icon" style="">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-sm-4" style="padding: 5px 25px">

                                            <div class="input-group" rel="tooltip" data-placement="top"
                                                 data-original-title="日志的结束时间">
                                                <span class="input-group-addon"><i
                                                        class="fa fa-calendar-check-o"></i></span>
                                                <input id="endDate" name="endDate" class="form-control laydate-icon"
                                                       style="">
                                            </div>
                                        </div>

                                        <div class="col-sm-4" style="padding: 5px 0">

                                            <div class="input-group" rel="tooltip" data-placement="top"
                                                 data-original-title="查询筛选">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" class="checkbox style-0" name="exception"
                                                               value="1">
                                                        <span>只查询异常信息</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </fieldset>

                                <div class="form-actions search-footer">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" name="query" class="btn btn-primary">
                                                <i class="fa fa-search"></i> 查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <script type="text/javascript">
                            $(function () {
                                var $form = $('#query-form');
                                $form.find('.search-action, .search-title').on('click', function () {
                                    var search_div = $form.find('.search-div');
                                    if (search_div.hasClass('hide')) {
                                        search_div.removeClass('hide');
                                        $form.find('.search-action').find('i').removeClass().addClass('fa fa-hand-o-left');
                                    } else {
                                        search_div.addClass('hide');
                                        $form.find('.search-action').find('i').removeClass().addClass('fa fa-hand-o-down');
                                    }
                                });
                            });
                        </script>
                    </div>

                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <div id="logTable"></div>
                    </div>

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid with search -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        var params = {};
        var $queryFrom = $("#query-form");
        var $logTbale = $('#logTable');

        // 初始化日期选择器
        var start = {
            format: 'YYYY-MM-DD hh:mm:ss',
            min: '1984-12-10 00:00:00', //设定最小日期
            max: '2099-12-10 23:59:59', //最大日期
            istime: true,
            istoday: true,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
                var endval = $queryFrom.find('input[name=endDate]');
                if (datas > endval.val()) {
                    endval.val(datas);
                }
            }
        };
        var end = {
            format: 'YYYY-MM-DD hh:mm:ss',
            min: '1984-12-10 00:00:00', //设定最小日期
            max: '2099-12-10 23:59:59', //最大日期
            istime: true,
            istoday: true,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        // 设置下拉
        $queryFrom.find('input[name=beginDate]').on('click', function () {
            laydate(start);
        });
        $queryFrom.find('input[name=endDate]').on('click', function () {
            laydate(end);
        });
        // 设置初始值
        $queryFrom.find('input[name=beginDate]').val(getNowFormatDate() + ' 00:00:00');
        $queryFrom.find('input[name=endDate]').val(getNowFormatDate() + ' 23:59:59');


        var datatable = new DataTableData({
                    databind: $logTbale.get(0),
                    //数据请求url地址
                    dataurl: '${ctx}/sys/log/list',
                    //数据请求参数
                    params: params,
                    hasCache: false,
                    hasIndex: false,
                    info: false,
                    toolbarStates: {
                        "add": {show: false},
                        "edit": {show: false},
                        "delete": {show: false}
                    },
                    columns: [
                        {
                            data: 'icon-title',
                            title: '',
                            defaultContent: '',
                            class: 'details-control',
                            width: '20px'
                        },
                        {
                            data: 'type', title: '日志类型',
                            // 日志类型（1：接入日志；2：错误日志; 3:操作日志）
                            render: function (value) {
                                if (value == 1) {
                                    return '<div class="text-center"><span class="label label-success">接入日志</span></div>';
                                } else if (value == 2) {
                                    return '<div class="text-center"><span class="label label-danger">错误日志</span></div>';
                                } else {
                                    return '<div class="text-center"><span class="label label-default">操作日志</span></div>';
                                }
                            }
                        },
                        {data: 'title', title: '操作菜单(主题)'},
                        {data: 'createName', title: '操作用户'},
                        {data: 'requestUri', title: 'URI'},
                        {data: 'method', title: '提交方式'},
                        {data: 'remoteAddr', title: '操作IP'},
                        {data: 'createDate', title: '操作时间'}
                    ],
                    drawCallback: function () {
                        $logTbale.find('.details-control').addClass('details-control-padding');
                    }
                }
        );

        // Add event listener for opening and closing details
        $logTbale.find('tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = datatable.getDataTable().api().row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });

        /**
         * 格式化输出信息
         */
        function format(d) {
            // `d` is the original data object for the row
            return '<table cellpadding="4" cellspacing="0" border="0" class="table table-hover table-condensed">' +
                    '   <tr>' +
                    '       <td style="width:75px">日志操作:</td>' +
                    '       <td>' + d.title + '</td>' +
                    '   </tr>' +
                    '   <tr>' +
                    '       <td>用户代理:</td>' +
                    '       <td class="auto-new-line">' + (d.userAgent || '') + '</td>' +
                    '   </tr>' +
                    '   <tr>' +
                    '       <td>提交参数:</td>' +
                    '       <td class="auto-new-line">' + (d.params || '') + '</td>' +
                    '   </tr>' +
                    '   <tr>' +
                    '       <td>异常信息:</td>' +
                    '       <td class="auto-new-line">' + (d.exception || '') + '</td>' +
                    '   </tr>' +
                    '</table>';
        }

        /**
         * 获取当前日期和时间的方法,并按照YYYY-MM-DD格式化
         */
        function getNowFormatDate() {
            var date = new Date();
            var seperator = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            return year + seperator + month + seperator + strDate;
        }

        // query
        $queryFrom.find('[name=query]').on('click', function () {
            params = {
                'createBy.id': $queryFrom.find('select[name="createBy.id"]').val(),
                'method': $queryFrom.find('select[name=method]').val(),
                'title': $queryFrom.find('input[name=title]').val(),
                'beginDate': $queryFrom.find('input[name=beginDate]').val(),
                'endDate': $queryFrom.find('input[name=endDate]').val(),
                'exception': $queryFrom.find('input[name=exception]').prop('checked') ? '1' : ''
            };
            // 根据查询更新表
            datatable.refresh(params);
        });

        laydate.reinit();
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        // 移除多余的附加,否则其他页面使用失败
        $(body).removeClass('laydate_body');
    };
    // end destroy

    // load related plugins
    loadScript("/static/js/plugin/datatables/jquery.dataTables.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.colVis.js", function () {
            loadScript("/static/js/plugin/datatables/dataTables.tableTools.js", function () {
                loadScript("/static/js/plugin/datatables/dataTables.bootstrap.js", function () {
                    loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.js", function () {
                        loadScript("/static/js/extend/DataTableData.js", function () {
                            loadScript("/static/js/plugin/laydate/laydate.js", pagefunction);
                        });
                    });
                });
            });
        });
    });

</script>